<template>
	<div class="w-page w-donguide">
		<!-- 头部 -->
		<Header navNum="7" @isSearch='isSearch'></Header>
		<!-- 内容 -->
		<div class="conbox" v-if="!isSearchList">
			<div class="w-width">
				<!-- 正文内容开始 -->
				<div class="w-cardbox">
					<div class="w-card flex hs vs">
						<!-- 左侧开始 -->
						<Leftcard class="w-card-left shrink0" :isBackHome="isBackHome" :deAcBig='acBig' :menuList="menuList" :columnName="columnName" @aa="out" :isBottom='false'></Leftcard>
						<!-- 左侧结束 -->
						<div class="tabCon">
							<div class="w-tabtop flex hs vc">
								<img src="../assets/img/index/home.png" alt="" class="w-home">
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item :to="{}"><span @click="acBig = '0'; isBackHome = true">{{ columnName }}</span></el-breadcrumb-item>
                  <el-breadcrumb-item :to="{}"><span @click="isdetail = 0">{{ title }}</span></el-breadcrumb-item>
								</el-breadcrumb>
							</div>
							<div class="w-maincon">
								<div class="w-tabtitle">{{ title }}</div>
								<div v-if="acBig=='1'">
                  <div class="w-maincon">
<!--                    <div class="w-tabtitle">{{title}}</div>-->
                    <div v-if="introInfoList.length > 0">
                      <div v-for="(v,i) in introInfoList" :key="i" >
                        <div class="w-tabcon" v-html="v.content"></div>
                      </div>
                    </div>
                    <div v-else>
                      <div class="w-con" >暂无</div>
                    </div>
                  </div>
<!--									<div class="w-tabcon">-->
<!--										<div class="w-tabconitem">-->
<!--											<h3>一、银行转账</h3>-->
<!--											<ul>-->
<!--												<li>开户名：山西师范 大学教育发展基金会</li>-->
<!--												<li> 账 号：1949 0000 0000 00000</li>-->
<!--												<li>开户行：山西某某银行某支行</li>-->
<!--												<li>收款人：山西师范大学教育发展基金会</li>-->
<!--												<li>支付时需备注捐赠项目</li>-->
<!--											</ul>-->
<!--										</div>-->
<!--										<div class="w-tabconitem">-->
<!--											<h3>二、微信捐赠</h3>-->
<!--											<ul>-->
<!--												<li>关注“山西师范大学教育发展基金会微捐平台”微信公众号,里面有相关捐赠项目，可通过微信支付方式捐赠。</li>-->
<!--												<li>-->
<!--													<img src="../assets/img/index/er.png" alt="" style="cursor: pointer;" @click="showDialog">-->
<!--												</li>-->
<!--												<li>山西师范大学教育</li>-->
<!--												<li>发展基金会微捐平台</li>-->
<!--											</ul>-->
<!--										</div>-->
<!--									</div>-->
								</div>
								<div v-else-if="acBig=='2'">
                  <div class="w-maincon">
                    <!--                    <div class="w-tabtitle">{{title}}</div>-->
                    <div v-if="introInfoList.length > 0">
                      <div v-for="(v,i) in introInfoList" :key="i" >
                        <div class="w-tabcon" v-html="v.content"></div>
                      </div>
                    </div>
                    <div v-else>
                      <div class="w-con" >暂无</div>
                    </div>
                  </div>
<!--									<img src="../assets/img/index/guide.png" alt="" class="w-guideimg">-->
								</div>
								<div v-else-if="acBig=='3'">
									<div v-if="List.length">
                    <ul class="w-answer">
                      <li v-for="(v,i) in List" :key="i">
                        <h2 @click="open(v,i)">{{v.title}}</h2>
                        <div v-show="v.isOpen">
                          <div class="w-html" v-html="v.content"></div>
                        </div>
                      </li>
                    </ul>
                    <el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="size" layout="total, prev, pager, next"
                                   :total="total">
                    </el-pagination>
                  </div>
                  <div v-else>
                    <div class="w-con">暂无</div>
                  </div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 正文内容 结束 -->
			</div>
		</div>
		<!-- 底部开始 -->
		<Footer></Footer>
		<!-- 底部结束 -->
	</div>
</template>

<script>
	import {
		articleClassList
	} from '@/api/article'
	export default {
		data() {
			return {
				columnName: '捐赠指南',
				title: '',
				acBig: '',
				menuList: [{
						id: 1,
						name: '捐赠形式',
						ischildren: false,
					},
					// {
					// 	id: 2,
					// 	name: '捐赠流程',
					// 	ischildren: false,
          //
					// },
					{
						id: 2,
						name: '捐赠答疑',
						ischildren: false,
					},
				],
				queslist: [],
				// 列表
				List: [],
				size: 10,
				page: 1,
				total: 0,
				isFirst:true,
				deAcBig:"0",
				isSearchList: false,
        introInfoList: [],
        isBackHome: false
			};
		},
		created() {
			this.isSearch()

			if(this.$route.query.deAcBig){
				this.acBig = this.$route.query.deAcBig.toString()

        this.changeMenu()
			}
		},

    watch: {
      $route () {
        this.acBig = this.$route.query.deAcBig
        this.out(JSON.stringify({
          acBig: this.acBig,
          acSml: ''
        }))

        this.changeMenu()
      }
    },

		methods: {
      showDialog() {
        // 事件触发 显示捐赠模态框
        this.$eventBus.$emit('isShowCodeDialog', true, false)
      },

			isSearch(data){
				console.log(data)
				this.isSearchList=data
			},
			out(data) {
				if (data) {
					console.log("hjkl",data)
					this.page = 1
          var cacheData = JSON.parse(data)
          this.acBig = cacheData.acBig.toString()

          this.$router.replace({
            path: '/donation_guide',
            query: {
              deAcBig: parseInt(this.acBig)
            }
          }).catch(err => {})
				}
				this.isBackHome = false
			},

      changeMenu() {
        this.menuList.forEach(item => {
          if (item.id == this.acBig) {
            this.title = item.name
          }
        });
        console.log(this.acBig)
        if (this.acBig == 1) { // 捐赠途径
          articleClassList({
            classId: 44,
            size: 0
          }).then(response => {
            this.introInfoList = response.data.list
          })
        } if (this.acBig == 2) { // 捐赠途径
          articleClassList({
            classId: 52,
            size: 0
          }).then(response => {
            this.introInfoList = response.data.list
          })
        } if (this.acBig == 3) {
          this.getList()
        }
      },

			open(v, i) {
				this.List.forEach(item => {
					if (v.isOpen !== item.isOpen) {
						this.$forceUpdate()
						item.isOpen = false;
					}
				});
				this.$forceUpdate()
				v.isOpen = !v.isOpen;
			},
			// 分页
			handleCurrentChange(currentPage) {
				this.page = currentPage;
				this.getList()
			},
			getList() {
				articleClassList({
					classId: 3,
					size: this.size,
					page: this.page,
				}).then(response => {
					this.List = response.data.list
					this.total = response.data.total
					this.List.forEach(v => {
						v.isOpen = false
					})
				})
			}
		}
	};
</script>
<style scoped>
  .w-maincon>>>.image {
    margin-left: auto;
    margin-right: auto;
  }

	.w-maincon>>>img {
		width: 100%;
		display: block;
	}

	.w-maincon>>>p {
		text-indent: 30px;
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		line-height: 2;
		margin-bottom: 20px;
		text-align: justify;
	}

	.w-html {
		/* height: 100px;
		overflow: hidden; */
	}

	.tabCon {
		min-height: 800px;
	}

	/* ............... */
	.w-tabcon .w-tabconitem {
		margin-bottom: 50px;
	}

	.w-tabcon .w-tabconitem h3 {
		font-size: 18px;
		color: #333333;
		margin-bottom: 14px;
	}

	.w-tabcon .w-tabconitem li {
		padding: 6px 0;
		font-size: 16px;
		color: #333;
	}

	.w-tabcon .w-tabconitem img {
		width: 100px;
		height: 100px;
		display: block;
	}

	/* .................... */
	.w-guideimg {
		width: 90%;
		display: block;
		margin: 0 auto;
	}

	/* ................... */
	.w-answer h2 {
		font-size: 18px;
		color: #7A1D1D;
		width: 100%;
		border-bottom: 1PX dotted #999999;
		padding: 15px 0;
		margin-bottom: 15px;
		/* margin-top: 55px; */
		font-weight: 400;
	}

	.w-answer p {
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		line-height: 1.8;
	}
</style>
<style scoped>
	/* 公共css */
	.w-card {
		background: #fff;
	}

	.w-card-left {
		width: 26%;
	}

	/* 右侧 */
	.w-home {
		width: 16px;
		display: block;
		height: 14px;
		margin-right: 15px;
	}

	.tabCon {
		padding: 35px 33px;
		box-sizing: border-box;
		width: 74%;
	}

	.w-tabtitle {
		margin-top: 39px;
		margin-bottom: 47px;
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}

	.w-width {
		width: 70%;
		padding-top: 15px;
		margin: 0 auto;
	}

	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}
</style>
<style>
	/* 面包屑 */
	.w-donguide .el-tabs--left .el-tabs__header.is-left {
		width: 26%;
	}

	.w-donguide .el-tabs--left .el-tabs__item.is-left {
		text-align: center;
		color: #333;
		font-size: 18px;
	}

	.w-donguide .el-breadcrumb__inner a:hover,
	.el-breadcrumb__inner.is-link:hover {
		color: #692324;
	}

	.w-donguide .el-pager li {
		border: 1PX solid #9C9A9B;
		margin: 0 7px;
		font-size: 14px;
		font-weight: 300;
		border-radius: 3px;
	}

	.w-donguide .el-pager li.active+li {
		border: 1PX solid #9C9A9B;
	}

	.w-donguide .el-pager li.active {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-donguide .el-pager li:hover {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-donguide .el-pagination {
		text-align: center;
	}
</style>
